<template>
  <div>
    <div class="bargain">
      <div class="bargain_title">
        <img src="../assets/icon/left-arrow.png" alt @click="goto('/classify')" />
        <div>商品列表</div>
        <span></span>
      </div>
    </div>
    <!-- 推荐列表 -->
    <div class="Sentiment_list">
      <div
        class="Sentiment_item"
        v-for="(item,index) in ListItem"
        :key="index"
        v-show="index>4"
        @click="gotos('/details',item)"
      >
        <img style="width:100%;height:200px" :src="item.pic" alt />
        <div class="van-ellipsis">{{item.name}}</div>
        <div class="van-ellipsis" style="font-size:10px">{{item.characteristic}}</div>
        <p style="color:red">￥{{item.minPrice}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$store.dispatch("LISTITEM");
  },
  computed: {
    ListItem: function () {
      return this.$store.state.ListItem;
    },
  },
  methods: {
    goto(path) {
      this.$router.push(path);
    },
    gotos(path, cid) {
        // console.log(cid)
      this.$router.push(path);
      this.$store.dispatch("GOTOITEM", cid);
    },
  },
};
</script>

<style scoped>
.Sentiment_list {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  font-size: 16px;
  margin: 0 auto;
}
.Sentiment_item {
  width: 45%;
  margin: 0px 8px;
}
.Sentiment_item p {
  margin: 10px 0px;
}
.bargain_title {
  width: 96%;
  height: 47px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
  margin: 0 auto;
}
</style>